
<template>
   <div id="app" class="mod-config">
    <div class="left">
      <div class="asstes top">
        <div id="left1" ></div>
      </div>
      <div class="asstes">
        <div id="left2"></div>
      </div>
      <div class="asstes bottom">
        <div id="left3"></div>
      </div>
    </div>
    <div class="content">
      <div class="content-top">
        <div class="content-title">永修县高标准农田管理平台</div>
        <div class="content-map" id="map">
          地图
        </div>
        <div class="content-list">
          <span class="content-list-title">
            全年灌溉量情况
            <br>
            <i class="number">19,254,533</i>
            <i class="about">立方米</i>
          </span>
          <div id="line"></div>
          <div class="content-list-about">
            <i class="content-list-about i"> <img :src="weather == '多图'?'':'../static/images/kg.png'"></i>
            <span class="content-list-about span1">实时画面</span>
            <i class="content-list-about i"> <img :src="weather == '多图'?'':'../static/images/kg2.png'"></i>
            <span class="content-list-about span2">显示报警</span>
          </div>
          <div class="content-list-about">
            <i class="content-list-about i"><img :src="weather == '多图'?'':'../static/images/sxt.png'"></i>
            <span class="content-list-about span3">共接入<i class="content-list-about-i">28</i>个实时视频信号</span>
          </div>
          <div class="content-list-about">
            <video id="myPlayer" autoplay controls width="100%" height="183"
              src="rtmp://rtmp01open.ys7.com/openlive/a37a278c7de84588b95989e3c7e4b926.hd" playsInline
              webkit-playsinline>
            </video>
          </div>
          <!-- <span class="content-list-about" style="color:#d0a00e">基1#22共捕获18个活体动物闯入画面</span><br>
          <span class="content-list-about" style="color:#d0a00e">基2#09共捕获14个活体动物闯入画面</span><br>
          <span class="content-list-about" style="color:white">基2#13信号丢失....正在进行自动诊断</span><br>
         
          <span class="content-list-about" style="color:#eb2100">基1#17存储卡故障，已发送异常信息</span><br> -->
        </div>
      </div>
      <div class="content-table">
        <table class="content-table table" border="0">
          <thead class="content-table thead">
            <tr>
              <th>基地</th>
              <th>田地</th>
              <th>种植作物</th>
              <th>所属单位</th>
              <th>起止周期</th>
              <th>生长进度</th>
            </tr>
          </thead>
          <tbody ref="tbody">
            <tr v-for="(item,index) in listp" :key="index" :class="index%2 == 0?'table-class1':'table-class2'" >
              <td style="width: 6%">{{item.deptIdname}}</td>
              <td style="width: 5%">{{item.farmlandInfoIdname}}</td>
              <td style="width: 15%"> {{item.cropDictname}}</td>
              <td style="width: 20%">永修县农业局</td>
             <td style="width: 20%">{{formatTime(item.startTime)}}-{{formatTime(item.endTime)}}</td>
              <td style="width: 25%">
               <progress  max="100" :value="item.sjc" id="pg"></progress>{{item.sjc}}</td>
              </td>
            </tr>
           
          </tbody>
        </table>
      </div>
    </div>
    <div class="right">
      <div class="asstes top">
        <div id="right1">
           <div id="today_container">
	
	            <div style="float: left">
	                <img class="oneimg" :src="weather == '晴'?'../static/img/1.png':weather == '多云'?'../static/img/2.png':weather == '阴天'?'../static/img/3.png':weather == '阵雨'?'../static/img/4.png':'../static/img/7.png'" alt="今日天气"/>
	            </div>
			       <div style="color:#FFF;">
	                <div class=""><span style="color:#eb2100" class="info">{{area}}</span>|<span class="info">{{formatTime(createTime)}}</span>|<span class="info">{{week}}</span>
	                <br>
	                <!-- <span class="info">{{low}}-{{high}}</span> -->
	                 </div>
	                <div class="more_info">今日温度：<span style="font-size: 20px" class="info colorbulue">{{low}}--{{high}}</span>
	                <br>
	              风力：<span class="info">{{windSpeed}}</span> 风向：<span class="info">{{fx}}</span> <!-- PM2.5：<span class="info"></span> --></div>
	            </div>
            </div>
            <div id="future_container" style="font-size: 5px;">

            <div class="future_box fivewether" >
                <!-- <img class="future_infoimg" style="width: 30%" src="./imageswe/weather_icon/1.png" alt="天气"/> -->
                {{future[0]}}
                <br>
                <span class="future_info" style="font-size: 5px">{{future[1]}}</span>
                 <br>
                <span class="future_info"></span><span  class="future_info wzcenter">{{future[2]}}-{{future[3]}}</span>
            </div>
           
            <div class="future_box fivewether" >
                <!-- <img class="future_infoimg" style="width: 30%" src="./imageswe/weather_icon/1.png" alt="天气"/> -->
                {{future[4]}}
                <br>
                <span class="future_info">{{future[5]}}</span>
                 <br>
                <span class="future_info"></span><span class="future_info wzcenter">{{future[6]}}-{{future[7]}}</span>
            </div>
            
             <div class="future_box fivewether" >
               <!--  <img class="future_infoimg" style="width: 30%" src="./imageswe/weather_icon/1.png" alt="天气"/> -->
               {{future[8]}}
                <br>
                <span class="future_info">{{future[9]}}</span>
                 <br>
                <span class="future_info"></span><span class="future_info wzcenter">{{future[10]}}-{{future[11]}}</span>
            </div>
            
             <div class="future_box fivewether" >
                <!-- <img class="future_infoimg" style="width: 30%" src="./imageswe/weather_icon/1.png" alt="天气"/> -->
                {{future[12]}}
                <br>
                <span class="future_info">{{future[13]}}</span>
                 <br>
                <span class="future_info"></span><span  class="future_info wzcenter" >{{future[14]}}-{{future[15]}}</span>
            </div>
        </div>

        </div>
      </div>
      <div class="asstes">
        <div id="right2" class="right-notice">
          <span class="diyh"> 通知公告</span><br>
          <marquee id="affiche" align="left"  direction="up"  hspace="10" vspace="10" loop="-1" scrollamount="10" scrolldelay="1" >
            <span v-for="item in tzgg" :key="index" class="dish">
            <span class="tz">【公告】</span>
            {{item.content}}<br></span> <br/>
          </marquee>

          <span class="warning">
            <!-- <img alt="" src="../static/images/weather_icon/gj.png"> -->
            【重要告警】基1#13田块水位超低 </span>
          <br>
          <span class="warning2">
            <!-- <img alt="" src="../static/images/weather_icon/tx.png"> -->
            &nbsp;#共6条一般提醒&nbsp;
            <span class="warning2">
              <!-- <img alt="" src="../static/images/weather_icon/txth.png"> -->
              共21条普通通知</span></span>
        </div>
      </div>
      <div class="asstes">
        <div id="right3"></div>
      </div>
      <div class="asstes bottom">
        <div id="right4"></div>
      </div>
    </div>
  </div>
</template>

<script>
// import {jquery} from  'https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js';
// import echarts from  '../../utils/echarts'
// import options from '..\static\echarjs\lib\options.js';
  // import  echarts  from '@/utils/echarts'
import Option from '../../utils/options' 
import '../../utils/options.js' 


export default {
    data () {
      return {
        // gaugeOption : Option.gaugeOption(),
        listp:[],
        //空气质量
        airQuality:null,
        //今日天气
        weather:null,
        //城市
        area:null,
        //日期
        createTime:'',
        //风向
        fx:'',
        //风力
        windSpeed:'',
        //星期几
        week:'',
          //今日温度
        low:'',
        high:'',
        future:[],
        tzgg:[],
        
      }
    },
    // created(){
    //     debugger
    //   this.test()
    // },
    mounted () {
      this.getDataList(),
      this.getlist(),
      this.getwd(),
      this.gettzgg()
      // this.setInterval(() => {
      //  3000
      // }, this.autoScroll(".maquee"));
      // this.setInterval(() => {
      //   2000
      // }, this.autoScroll(".apple"));
    },
    methods: {
      autoScroll(obj){
        this.$refs.tbody.animate({  
				marginTop : "-39px"  
        },500,function(){  
          this.$refs.tbody.css({marginTop : "0px"}).find("tr:first").appendTo(this);  
        })  
      },
      getDataList(){
          console.log(document.getElementById('left1'));
          debugger
          
/**
 * start 仪表盘
 */
var gaugeOption = {
  color: 'red',
  title: {
    text: '基地农作物总体健康指数',
    textStyle: {
      color: '#FFF',
      fontSize: 13
    }
  },
  tooltip: {
    formatter: "{a} <br/>{c} {b}"
  },
  series: [{
      name: '速度',
      type: 'gauge',
      min: 0,
      max: 220,
      splitNumber: 11,
      radius: '80%',
      axisLine: { // 坐标轴线
        lineStyle: { // 属性lineStyle控制线条样式
          color: [
            [0.09, 'lime'],
            [0.82, '#1e90ff'],
            [1, '#ff4500']
          ],
          width: 3,
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      axisLabel: { // 坐标轴小标记
        textStyle: { // 属性lineStyle控制线条样式
          fontWeight: 'bolder',
          color: '#fff',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      axisTick: { // 坐标轴小标记
        length: 15, // 属性length控制线长
        lineStyle: { // 属性lineStyle控制线条样式
          color: 'auto',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      splitLine: { // 分隔线
        length: 25, // 属性length控制线长
        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
          width: 3,
          color: '#fff',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      pointer: { // 分隔线
        shadowColor: '#fff', //默认透明
        shadowBlur: 5
      },
      title: {
        textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
          fontWeight: 'bolder',
          fontSize: 13,
          fontStyle: 'italic',
          color: '#fff',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      detail: {
        backgroundColor: 'rgba(30,144,255,0.8)',
        borderWidth: 1,
        borderColor: '#fff',
        shadowColor: '#fff', //默认透明
        shadowBlur: 5,
        offsetCenter: [0, '50%'], // x, y，单位px
        textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
          fontWeight: 'bolder',
          color: '#fff'
        }
      },
      data: [{
        value: 40,
        name: '作物健康值'
      }]
    },
    {
      name: '油表',
      type: 'gauge',
      center: ['20%', '50%'], // 默认全局居中
      radius: '50%',
      min: 0,
      max: 2,
      startAngle: 135,
      endAngle: 45,
      splitNumber: 2,
      axisLine: { // 坐标轴线
        lineStyle: { // 属性lineStyle控制线条样式
          color: [
            [0.2, 'lime'],
            [0.8, '#1e90ff'],
            [1, '#ff4500']
          ],
          width: 2,
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      axisTick: { // 坐标轴小标记
        length: 12, // 属性length控制线长
        lineStyle: { // 属性lineStyle控制线条样式
          color: 'auto',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      axisLabel: {
        textStyle: { // 属性lineStyle控制线条样式
          fontWeight: 'bolder',
          color: '#fff',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        },
        formatter: function (v) {
          switch (v + '') {
            case '0':
              return '0';
            case '1':
              return '风速';
            case '2':
              return '12';
          }
        }
      },
      splitLine: { // 分隔线
        length: 15, // 属性length控制线长
        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
          width: 3,
          color: '#fff',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      pointer: {
        width: 2,
        shadowColor: '#fff', //默认透明
        shadowBlur: 5
      },
      title: {
        show: false
      },
      detail: {
        show: false
      },
      data: [{
        value: 0.5,
        name: '水位'
      }]
    },
    {
      name: '水表',
      type: 'gauge',
      center: ['20%', '50%'], // 默认全局居中
      radius: '50%',
      min: 0,
      max: 2,
      startAngle: 315,
      endAngle: 225,
      splitNumber: 2,
      axisLine: { // 坐标轴线
        lineStyle: { // 属性lineStyle控制线条样式
          color: [
            [0.2, 'lime'],
            [0.8, '#1e90ff'],
            [1, '#ff4500']
          ],
          width: 2,
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      axisTick: { // 坐标轴小标记
        show: false
      },
      axisLabel: {
        textStyle: { // 属性lineStyle控制线条样式
          fontWeight: 'bolder',
          color: '#fff',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        },
        formatter: function (v) {
          switch (v + '') {
            case '0':
              return 'H';
            case '1':
              return '光照';
            case '2':
              return 'L';
          }
        }
      },
      splitLine: { // 分隔线
        length: 15, // 属性length控制线长
        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
          width: 3,
          color: '#fff',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      pointer: {
        width: 2,
        shadowColor: '#fff', //默认透明
        shadowBlur: 5
      },
      title: {
        show: false
      },
      detail: {
        show: false
      },
      data: [{
        value: 0.5,
        name: '水温'
      }]
    },
    {
      name: '油表',
      type: 'gauge',
      center: ['80%', '50%'], // 默认全局居中
      radius: '50%',
      min: 0,
      max: 2,
      startAngle: 135,
      endAngle: 45,
      splitNumber: 2,
      axisLine: { // 坐标轴线
        lineStyle: { // 属性lineStyle控制线条样式
          color: [
            [0.2, 'lime'],
            [0.8, '#1e90ff'],
            [1, '#ff4500']
          ],
          width: 2,
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      axisTick: { // 坐标轴小标记
        length: 12, // 属性length控制线长
        lineStyle: { // 属性lineStyle控制线条样式
          color: 'auto',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      axisLabel: {
        textStyle: { // 属性lineStyle控制线条样式
          fontWeight: 'bolder',
          color: '#fff',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        },
        formatter: function (v) {
          switch (v + '') {
            case '0':
              return 'E';
            case '1':
              return '水位';
            case '2':
              return 'F';
          }
        }
      },
      splitLine: { // 分隔线
        length: 15, // 属性length控制线长
        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
          width: 3,
          color: '#fff',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      pointer: {
        width: 2,
        shadowColor: '#fff', //默认透明
        shadowBlur: 5
      },
      title: {
        show: false
      },
      detail: {
        show: false
      },
      data: [{
        value: 0.5,
        name: '水位'
      }]
    },
    {
      name: '水表',
      type: 'gauge',
      center: ['80%', '50%'], // 默认全局居中
      radius: '50%',
      min: 0,
      max: 2,
      startAngle: 315,
      endAngle: 225,
      splitNumber: 2,
      axisLine: { // 坐标轴线
        lineStyle: { // 属性lineStyle控制线条样式
          color: [
            [0.2, 'lime'],
            [0.8, '#1e90ff'],
            [1, '#ff4500']
          ],
          width: 2,
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      axisTick: { // 坐标轴小标记
        show: false
      },
      axisLabel: {
        textStyle: { // 属性lineStyle控制线条样式
          fontWeight: 'bolder',
          color: '#fff',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        },
        formatter: function (v) {
          switch (v + '') {
            case '0':
              return 'H';
            case '1':
              return '水温';
            case '2':
              return 'C';
          }
        }
      },
      splitLine: { // 分隔线
        length: 15, // 属性length控制线长
        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
          width: 3,
          color: '#fff',
          shadowColor: '#fff', //默认透明
          shadowBlur: 10
        }
      },
      pointer: {
        width: 2,
        shadowColor: '#fff', //默认透明
        shadowBlur: 5
      },
      title: {
        show: false
      },
      detail: {
        show: false
      },
      data: [{
        value: 0.5,
        name: '水温'
      }]
    }
  ]

}

/**
 * end 仪表盘
 */

/**
 * start 散点图
 */
var dataGZ = [
  [1, 26, 37, 27, 1.163, 27, 13, "优"],
  [2, 85, 62, 71, 1.195, 60, 8, "良"],
  [3, 78, 38, 74, 1.363, 37, 7, "良"],
  [4, 21, 21, 36, 0.634, 40, 9, "优"],
  [5, 41, 42, 46, 0.915, 81, 13, "优"],
  [6, 56, 52, 69, 1.067, 92, 16, "良"],
  [7, 64, 30, 28, 0.924, 51, 2, "良"],
  [8, 55, 48, 74, 1.236, 75, 26, "良"],
  [9, 76, 85, 113, 1.237, 114, 27, "良"],
  [10, 91, 81, 104, 1.041, 56, 40, "良"],
  [11, 84, 39, 60, 0.964, 25, 11, "良"],
  [12, 64, 51, 101, 0.862, 58, 23, "良"],
  [13, 70, 69, 120, 1.198, 65, 36, "良"],
  [14, 77, 105, 178, 2.549, 64, 16, "良"],
  [15, 109, 68, 87, 0.996, 74, 29, "轻度污染"],
  [16, 73, 68, 97, 0.905, 51, 34, "良"],
  [17, 54, 27, 47, 0.592, 53, 12, "良"],
  [18, 51, 61, 97, 0.811, 65, 19, "良"],
  [19, 91, 71, 121, 1.374, 43, 18, "良"],
  [20, 73, 102, 182, 2.787, 44, 19, "良"],
  [21, 73, 50, 76, 0.717, 31, 20, "良"],
  [22, 84, 94, 140, 2.238, 68, 18, "良"],
  [23, 93, 77, 104, 1.165, 53, 7, "良"],
  [24, 99, 130, 227, 3.97, 55, 15, "良"],
  [25, 146, 84, 139, 1.094, 40, 17, "轻度污染"],
  [26, 113, 108, 137, 1.481, 48, 15, "轻度污染"],
  [27, 81, 48, 62, 1.619, 26, 3, "良"],
  [28, 56, 48, 68, 1.336, 37, 9, "良"],
  [29, 82, 92, 174, 3.29, 0, 13, "良"],
  [30, 106, 116, 188, 3.628, 101, 16, "轻度污染"],
  [31, 118, 50, 0, 1.383, 76, 11, "轻度污染"]
];

var dataSH = [
  [1, 91, 45, 125, 0.82, 34, 23, "良"],
  [2, 65, 27, 78, 0.86, 45, 29, "良"],
  [3, 83, 60, 84, 1.09, 73, 27, "良"],
  [4, 109, 81, 121, 1.28, 68, 51, "轻度污染"],
  [5, 106, 77, 114, 1.07, 55, 51, "轻度污染"],
  [6, 109, 81, 121, 1.28, 68, 51, "轻度污染"],
  [7, 106, 77, 114, 1.07, 55, 51, "轻度污染"],
  [8, 89, 65, 78, 0.86, 51, 26, "良"],
  [9, 53, 33, 47, 0.64, 50, 17, "良"],
  [10, 80, 55, 80, 1.01, 75, 24, "良"],
  [11, 117, 81, 124, 1.03, 45, 24, "轻度污染"],
  [12, 99, 71, 142, 1.1, 62, 42, "良"],
  [13, 95, 69, 130, 1.28, 74, 50, "良"],
  [14, 116, 87, 131, 1.47, 84, 40, "轻度污染"],
  [15, 108, 80, 121, 1.3, 85, 37, "轻度污染"],
  [16, 134, 83, 167, 1.16, 57, 43, "轻度污染"],
  [17, 79, 43, 107, 1.05, 59, 37, "良"],
  [18, 71, 46, 89, 0.86, 64, 25, "良"],
  [19, 97, 71, 113, 1.17, 88, 31, "良"],
  [20, 84, 57, 91, 0.85, 55, 31, "良"],
  [21, 87, 63, 101, 0.9, 56, 41, "良"],
  [22, 104, 77, 119, 1.09, 73, 48, "轻度污染"],
  [23, 87, 62, 100, 1, 72, 28, "良"],
  [24, 168, 128, 172, 1.49, 97, 56, "中度污染"],
  [25, 65, 45, 51, 0.74, 39, 17, "良"],
  [26, 39, 24, 38, 0.61, 47, 17, "优"],
  [27, 39, 24, 39, 0.59, 50, 19, "优"],
  [28, 93, 68, 96, 1.05, 79, 29, "良"],
  [29, 188, 143, 197, 1.66, 99, 51, "中度污染"],
  [30, 174, 131, 174, 1.55, 108, 50, "中度污染"],
  [31, 187, 143, 201, 1.39, 89, 53, "中度污染"]
];

var schema = [{
    name: 'date',
    index: 0,
    text: '日'
  },
  {
    name: 'AQIindex',
    index: 1,
    text: '光照量'
  }
];


var itemStyle = {
  normal: {
    opacity: 0.8,
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowOffsetY: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
};


var scatterOption = {
  color: [
    '#3DB527', '#80F1BE'
  ],
  legend: {
    y: 'top',
    data: ['基地1', '基地2'],
    textStyle: {
      color: '#fff',
      fontSize: 16
    }
  },
  grid: {
    x: '10%',
    x2: 150,
    y: '18%',
    y2: '10%'
  },
  tooltip: {
    padding: 10,
    backgroundColor: '#3DB527',
    borderColor: '#777',
    borderWidth: 1,
    formatter: function (obj) {
      var value = obj.value;
      return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
        obj.seriesName + ' ' + value[0] + '日：' +
        value[7] +
        '</div>' +
        schema[1].text + '：' + value[1] + '<br>' +
        schema[2].text + '：' + value[2] + '<br>';
    }
  },
  xAxis: {
    type: 'value',
    name: '日期',
    nameGap: 16,
    nameTextStyle: {
      color: '#fff',
      fontSize: 14
    },
    max: 31,
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#eee'
      }
    }
  },
  yAxis: {
    type: 'value',
    name: '光照',
    nameLocation: 'end',
    nameGap: 20,
    nameTextStyle: {
      color: '#fff',
      fontSize: 16
    },
    axisLine: {
      lineStyle: {
        color: '#eee'
      }
    },
    splitLine: {
      show: false
    }
  },
  visualMap: [{
    left: 'right',
    bottom: '5%',
    dimension: 6,
    min: 0,
    max: 50,
    itemHeight: 120,
    calculable: true,
    precision: 0.1,
    text: ['光照量'],
    textGap: 30,
    textStyle: {
      color: '#fff'
    },
    inRange: {
      colorLightness: [1, 0.5]
    },
    outOfRange: {
      color: ['rgba(255,255,255,.2)']
    },
    controller: {
      inRange: {
        color: ['#3DB527']
      },
      outOfRange: {
        color: ['#444']
      }
    }
  }],
  series: [{
      name: '基地1',
      type: 'scatter',
      itemStyle: itemStyle,
      data: dataSH
    },
    {
      name: '基地2',
      type: 'scatter',
      itemStyle: itemStyle,
      data: dataGZ
    }
  ]
};
/**
 * end 散点图
 */

/**
 * start 极坐标系下的堆叠柱状图
 */
var polarData = [
  [5000, 10000, 6785.71],
  [4000, 10000, 6825],
  [3000, 6500, 4463.33],
  [2500, 5600, 3793.83],
  [2000, 4000, 3060],
  [2000, 4000, 3222.33],
  [2500, 4000, 3133.33],
  [1800, 4000, 3100],
  [2000, 3500, 2750],
  [2000, 3000, 2500],
  [1800, 3000, 2433.33],
  [2000, 2700, 2375],
  [1500, 2800, 2150],
  [1500, 2300, 2100],
  [1600, 3500, 2057.14],
  [1500, 2600, 2037.5],
  [1500, 2417.54, 1905.85],
  [1500, 2000, 1775],
  [1500, 1800, 1650]
];
var cities = ['立春', '雨水', '惊蛰', '春分', '清明', '谷雨', '立夏',
  '小满', '芒种', '夏至', '小暑', '大暑', '立秋', '处暑',
  '白露', '秋分', '寒露', '霜降', '立冬',
  '小雪', '大雪', '冬至', '小寒', '大寒'
];
var barHeight = 50;

var polarOption = {
  title: {
    text: '二十四节气降水量分布图',
    textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
      fontSize: 13,
      color: '#FFF'
    }

  },
  legend: {
    show: true,
    data: ['平均范围', '均值']
  },
  grid: {
    top: 100
  },
  angleAxis: {
    type: 'category',
    data: cities,
    axisLine: { //坐标轴轴线设置
      lineStyle: {
        color: '#FFF',
      }
    }
  },
  tooltip: {
    show: true,
    formatter: function (params) {
      var id = params.dataIndex;
      return cities[id] + '<br>最低：' + polarData[id][0] + '<br>最高：' + polarData[id][1] + '<br>平均：' + polarData[id][2];
    }
  },
  radiusAxis: {
    axisLabel: { //刻度标签设置
      margin: 0, //刻度与坐标轴之间的距离
      textStyle: {
        color: '#FFF'
      }
    }
  },
  polar: {},
  series: [{
    type: 'bar',
    itemStyle: {
      normal: {
        color: 'transparent'
      }
    },
    data: polarData.map(function (d) {
      return d[0];
    }),
    coordinateSystem: 'polar',
    stack: '最大最小值',
    silent: true
  }, {
    type: 'bar',
    data: polarData.map(function (d) {
      return d[1] - d[0];
    }),
    coordinateSystem: 'polar',
    name: '平均范围',
    stack: '最大最小值'
  }, {
    type: 'bar',
    itemStyle: {
      normal: {
        color: 'transparent'
      }
    },
    data: polarData.map(function (d) {
      return d[2] - barHeight;
    }),
    coordinateSystem: 'polar',
    stack: '均值',
    silent: true,
    z: 10
  }, {
    type: 'bar',
    data: polarData.map(function (d) {
      return barHeight * 2
    }),
    coordinateSystem: 'polar',
    name: '均值',
    stack: '均值',
    barGap: '-100%',
    z: 10
  }],
  legend: {
    show: true,
    data: ['A', 'B', 'C']
  }
};
/**
 * end 极坐标系下的堆叠柱状图
 */


/**
 * start 正负图
 */
var plusMinusOption = {
  color: ['#eb2100', '#0096f3'],
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  title: {
    text: '知识库学习情况',
    textStyle: {
      color: '#FFF',
      fontSize: 13
    }
  },
  legend: {
    data: ['总量', '下载量'],
    left: 'right',
    textStyle: {
      color: '#FFF',
      fontSize: 13
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '16%',
    containLabel: true
  },
  xAxis: [{
    type: 'value'
  }],
  yAxis: [{
    type: 'category',
    axisTick: {
      show: false
    },
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  }],
  series: [

    {
      name: '总量',
      type: 'bar',
      stack: '总量',
      label: {
        normal: {
          show: true,
        }
      },
      data: [320, 302, 341, 374, 390, 450, 420]
    },
    {
      name: '下载量',
      type: 'bar',
      stack: '总量',
      label: {
        normal: {
          show: true,
          position: 'left'
        }
      },
      data: [-120, -132, -101, -134, -190, -230, -210]
    }
  ]
};
/**
 * end 正负图
 */

/**
 * start 预警工单处理
 */
//预警工单处理
var annularOption = {
  color: ['#eb2100', '#0096f3', '#d0a00e'],
  grid: {
    top: 33,
    left: 10
  },
  //backgroundColor: '#000', 
  textStyle: {
    color: '#fff',
    fontSize: 16
  },
  title: {
    text: '预警信息处理情况',
    x: 'left',
    textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
      fontWeight: 'bolder',
      fontSize: 13,
      // fontStyle: 'italic',
      color: '#FFF'
    }

  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  /*    legend: {
        orient: 'vertical',
        left: 'right',
        data: ["处理","工单","报警" ],
    },  */
  series: [{
    center: ['30%', '53%'],
    name: '报警',
    type: 'pie',
    radius: ['75%', '90%'],
    label: {
      normal: {
        position: 'inner'
      }
    },

    data: [{
        value: '7100',
        name: '处理',
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            normal: {
              color: '#06c'
            }
          }
        }
      },
      {
        value: '2800',
        itemStyle: {
          normal: {
            color: 'transparent'
          }
        }
      }
    ]
  }, {
    center: ['30%', '50%'],
    name: '化学',
    type: 'pie',
    radius: ['65%', '50%'],
    data: [{
        value: '1525',
        name: '工单',
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            normal: {
              color: '#dc1439'
            }
          }
        }
      },
      {
        value: '1500',
        itemStyle: {
          normal: {
            color: 'transparent'
          }
        }
      }
    ]

  }, {
    center: ['30%', '50%'],
    name: '生物',
    type: 'pie',
    radius: ['15%', '30%'],
    data: [
      // {value:1078, name:'生物'}
      {
        value: '1078',
        name: '预警',
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            normal: {
              color: '#dc1439'
            }
          }
        }
      },
      {
        value: '800',
        itemStyle: {
          normal: {
            color: 'transparent'
          }
        }
      }

    ]
  }]
};
/**
 * end 预警工单处理
 */



/** 
 * start 地图
*/
var mapData = {}
echarts.registerMap('ls', mapData);
var geoCoordMap = {
  '基地1': [120.43, 31.970892279],
  '基地2': [120.665220625, 31.8253475975],
}
var list = [{
    name: '基地1',
    value: 21
  },

  {
    name: '基地2',
    value: 18
  },
]
var convertData = function (list) {
  var res = [];
  for (var i = 0; i < list.length; i++) {
    var geoCoord = geoCoordMap[list[i].name];
    if (geoCoord) {
      res.push({
        name: list[i].name,
        value: geoCoord.concat(list[i].value)
      });
    }
  }
  return res;
}
var mapOptions = {
  grid: {
    top: 100,
  },
  // backgroundColor: '#fff',
  title: {
    text: "实验基地地理位置分布",
    textStyle: {
      color: '#FFF',
      top: 120,
    }
  },
  tooltip: {
    formatter: function (e) {
      if (typeof (e.value)[2] == "undefined") {
        console.log(e.name);
        return '田块' + Math.ceil(Math.random() * 10) + '<br>水位：3<br>设备：4';
      } else {
        return '' + e.name + '<br>田块:' + e.value[2] + '块';
      }

    }
  },
  geo: {
    map: 'ls',
    show: true,
    label: {
      emphasis: {
        show: false
      }
    },
    itemStyle: {
      normal: {
        areaColor: '#C9E6FF',
        borderColor: '#fff',
        borderWidth: 2,
        shadowColor: '#5AB2FE',
        shadowBlur: 20
      }
    },
    zoom: 1.2,
  },
  series: [{
      type: 'map',
      map: 'ls',
      geoIndex: 1,
      aspectScale: 0.75, //长宽比
      zoom: 1.2,
      label: {
        emphasis: {
          show: false,
          textStyle: {
            color: '#05C3F9'
          }
        }
      },
      roam: false,
      itemStyle: {
        normal: {
          areaColor: 'transparent',
          borderColor: '#fff',
          borderWidth: 2
        },
        emphasis: {
          areaColor: '#C9E6FF',
          shadowColor: '#5AB2FE',
          shadowBlur: 20
        }
      },
      data: mapData,
    },
    {
      name: '企业数',
      type: 'scatter',
      coordinateSystem: 'geo',
      symbol: 'circle',
      symbolSize: function (val) {
        var num = val[2] / 4;
        if (num < 20) {
          return 80
        } else {
          return num;
        }
      },
      label: {
        normal: {
          show: true,
          formatter: function (value) {
            return value.value[2]
          },
          textStyle: {
            color: '#fff',
            fontSize: 12,
          }
        }
      },
      itemStyle: {
        normal: {
          color: '#1C3E64', //标志颜色
        }
      },
      zlevel: 2,
      data: convertData(mapData),
    }
  ]
}
/** 
 * end 地图
*/


/** 
 * start 线性图
*/
var myColor = ['#eb2100', '#0096f3', '#d0a00e'];
var lineOption = {
   // backgroundColor: '#0e2147',
    grid: {
        left: '1%',
        top: '3%',
        right: '0%',
        bottom: '1%',
        containLabel: true
    },
    xAxis: [{
        show: false,
    }],
    yAxis: [{
        axisTick: 'none',
        axisLine: 'none',
        offset: '7',
        axisLabel: {
            textStyle: {
                color: '#ffffff',
                fontSize: '11',
            }
        },
        data: ['一月', '二月', '三月', '五月', '六月', '七月',  '九月', '十月', '十一月', '十二月']
    }, {
        axisTick: 'none',
        axisLine: 'none',
        axisLabel: {
            textStyle: {
                color: '#ffffff',
                fontSize: '12',
            }
        },
        data: [ '10', '9', '8', '7', '6', '5', '4', '3', '2', '1']
    }, {
        name: '分拨延误TOP 10',
        nameGap: '50',
        nameTextStyle: {
            color: '#ffffff',
            fontSize: '12',
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(0,0,0,0)'
            }
        },
        data: [],
    }],
    series: [{
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: [4, 13, 25, 29, 38, 44, 50, 52, 60, 72 ],
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        color: '#ffffff',
                        fontSize: '8',
                    }
                }
            },
            barWidth: 5,
            itemStyle: {
                normal: {
                    color: function(params) {
                        var num = myColor.length;
                        return myColor[params.dataIndex % num]
                    },
                }
            },
            z: 2
        }, {
            name: '白框',
            type: 'bar',
            yAxisIndex: 1,
            barGap: '-100%',
            data: [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
            barWidth: 20,
            itemStyle: {
                normal: {
                    color: '#0e2147',
                    barBorderRadius: 5,
                }
            },
            z: 1
        }, {
            name: '外框',
            type: 'bar',
            yAxisIndex: 2,
            barGap: '-100%',
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
            barWidth: 24,
            itemStyle: {
                normal: {
                   /*  color: function(params) {
                        var num = myColor.length;
                        return myColor[params.dataIndex % num]
                    }, */
                    color:'#081223',
                    barBorderRadius: 5,
                }
            },
            z: 0
        },
        {
            name: '外圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            yAxisIndex: 2,
            symbolSize: 15,
            itemStyle: {
                normal: {
                    color: function(params) {
                        var num = myColor.length;
                        return myColor[params.dataIndex % num]
                    },
                    opacity: 1,
                }
            },
            z: 2
        }
    ]
}


/** 
 * end 线性图
*/

// export default {
//   gaugeOption: function(){
//     return gaugeOption
//   }
// }
// var gaugeOption = {
//   color: 'red',
//   title: {
//     text: '基地农作物总体健康指数',
//     textStyle: {
//       color: '#FFF',
//       fontSize: 13
//     }
//   },
//   tooltip: {
//     formatter: "{a} <br/>{c} {b}"
//   },
//   series: [{
//       name: '速度',
//       type: 'gauge',
//       min: 0,
//       max: 220,
//       splitNumber: 11,
//       radius: '80%',
//       axisLine: { // 坐标轴线
//         lineStyle: { // 属性lineStyle控制线条样式
//           color: [
//             [0.09, 'lime'],
//             [0.82, '#1e90ff'],
//             [1, '#ff4500']
//           ],
//           width: 3,
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       axisLabel: { // 坐标轴小标记
//         textStyle: { // 属性lineStyle控制线条样式
//           fontWeight: 'bolder',
//           color: '#fff',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       axisTick: { // 坐标轴小标记
//         length: 15, // 属性length控制线长
//         lineStyle: { // 属性lineStyle控制线条样式
//           color: 'auto',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       splitLine: { // 分隔线
//         length: 25, // 属性length控制线长
//         lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
//           width: 3,
//           color: '#fff',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       pointer: { // 分隔线
//         shadowColor: '#fff', //默认透明
//         shadowBlur: 5
//       },
//       title: {
//         textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
//           fontWeight: 'bolder',
//           fontSize: 13,
//           fontStyle: 'italic',
//           color: '#fff',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       detail: {
//         backgroundColor: 'rgba(30,144,255,0.8)',
//         borderWidth: 1,
//         borderColor: '#fff',
//         shadowColor: '#fff', //默认透明
//         shadowBlur: 5,
//         offsetCenter: [0, '50%'], // x, y，单位px
//         textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
//           fontWeight: 'bolder',
//           color: '#fff'
//         }
//       },
//       data: [{
//         value: 40,
//         name: '作物健康值'
//       }]
//     },
//     {
//       name: '油表',
//       type: 'gauge',
//       center: ['20%', '50%'], // 默认全局居中
//       radius: '50%',
//       min: 0,
//       max: 2,
//       startAngle: 135,
//       endAngle: 45,
//       splitNumber: 2,
//       axisLine: { // 坐标轴线
//         lineStyle: { // 属性lineStyle控制线条样式
//           color: [
//             [0.2, 'lime'],
//             [0.8, '#1e90ff'],
//             [1, '#ff4500']
//           ],
//           width: 2,
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       axisTick: { // 坐标轴小标记
//         length: 12, // 属性length控制线长
//         lineStyle: { // 属性lineStyle控制线条样式
//           color: 'auto',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       axisLabel: {
//         textStyle: { // 属性lineStyle控制线条样式
//           fontWeight: 'bolder',
//           color: '#fff',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         },
//         formatter: function (v) {
//           switch (v + '') {
//             case '0':
//               return '0';
//             case '1':
//               return '风速';
//             case '2':
//               return '12';
//           }
//         }
//       },
//       splitLine: { // 分隔线
//         length: 15, // 属性length控制线长
//         lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
//           width: 3,
//           color: '#fff',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       pointer: {
//         width: 2,
//         shadowColor: '#fff', //默认透明
//         shadowBlur: 5
//       },
//       title: {
//         show: false
//       },
//       detail: {
//         show: false
//       },
//       data: [{
//         value: 0.5,
//         name: '水位'
//       }]
//     },
//     {
//       name: '水表',
//       type: 'gauge',
//       center: ['20%', '50%'], // 默认全局居中
//       radius: '50%',
//       min: 0,
//       max: 2,
//       startAngle: 315,
//       endAngle: 225,
//       splitNumber: 2,
//       axisLine: { // 坐标轴线
//         lineStyle: { // 属性lineStyle控制线条样式
//           color: [
//             [0.2, 'lime'],
//             [0.8, '#1e90ff'],
//             [1, '#ff4500']
//           ],
//           width: 2,
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       axisTick: { // 坐标轴小标记
//         show: false
//       },
//       axisLabel: {
//         textStyle: { // 属性lineStyle控制线条样式
//           fontWeight: 'bolder',
//           color: '#fff',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         },
//         formatter: function (v) {
//           switch (v + '') {
//             case '0':
//               return 'H';
//             case '1':
//               return '光照';
//             case '2':
//               return 'L';
//           }
//         }
//       },
//       splitLine: { // 分隔线
//         length: 15, // 属性length控制线长
//         lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
//           width: 3,
//           color: '#fff',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       pointer: {
//         width: 2,
//         shadowColor: '#fff', //默认透明
//         shadowBlur: 5
//       },
//       title: {
//         show: false
//       },
//       detail: {
//         show: false
//       },
//       data: [{
//         value: 0.5,
//         name: '水温'
//       }]
//     },
//     {
//       name: '油表',
//       type: 'gauge',
//       center: ['80%', '50%'], // 默认全局居中
//       radius: '50%',
//       min: 0,
//       max: 2,
//       startAngle: 135,
//       endAngle: 45,
//       splitNumber: 2,
//       axisLine: { // 坐标轴线
//         lineStyle: { // 属性lineStyle控制线条样式
//           color: [
//             [0.2, 'lime'],
//             [0.8, '#1e90ff'],
//             [1, '#ff4500']
//           ],
//           width: 2,
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       axisTick: { // 坐标轴小标记
//         length: 12, // 属性length控制线长
//         lineStyle: { // 属性lineStyle控制线条样式
//           color: 'auto',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       axisLabel: {
//         textStyle: { // 属性lineStyle控制线条样式
//           fontWeight: 'bolder',
//           color: '#fff',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         },
//         formatter: function (v) {
//           switch (v + '') {
//             case '0':
//               return 'E';
//             case '1':
//               return '水位';
//             case '2':
//               return 'F';
//           }
//         }
//       },
//       splitLine: { // 分隔线
//         length: 15, // 属性length控制线长
//         lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
//           width: 3,
//           color: '#fff',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       pointer: {
//         width: 2,
//         shadowColor: '#fff', //默认透明
//         shadowBlur: 5
//       },
//       title: {
//         show: false
//       },
//       detail: {
//         show: false
//       },
//       data: [{
//         value: 0.5,
//         name: '水位'
//       }]
//     },
//     {
//       name: '水表',
//       type: 'gauge',
//       center: ['80%', '50%'], // 默认全局居中
//       radius: '50%',
//       min: 0,
//       max: 2,
//       startAngle: 315,
//       endAngle: 225,
//       splitNumber: 2,
//       axisLine: { // 坐标轴线
//         lineStyle: { // 属性lineStyle控制线条样式
//           color: [
//             [0.2, 'lime'],
//             [0.8, '#1e90ff'],
//             [1, '#ff4500']
//           ],
//           width: 2,
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       axisTick: { // 坐标轴小标记
//         show: false
//       },
//       axisLabel: {
//         textStyle: { // 属性lineStyle控制线条样式
//           fontWeight: 'bolder',
//           color: '#fff',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         },
//         formatter: function (v) {
//           switch (v + '') {
//             case '0':
//               return 'H';
//             case '1':
//               return '水温';
//             case '2':
//               return 'C';
//           }
//         }
//       },
//       splitLine: { // 分隔线
//         length: 15, // 属性length控制线长
//         lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
//           width: 3,
//           color: '#fff',
//           shadowColor: '#fff', //默认透明
//           shadowBlur: 10
//         }
//       },
//       pointer: {
//         width: 2,
//         shadowColor: '#fff', //默认透明
//         shadowBlur: 5
//       },
//       title: {
//         show: false
//       },
//       detail: {
//         show: false
//       },
//       data: [{
//         value: 0.5,
//         name: '水温'
//       }]
//     }
//   ]

// }

          var myChartGaugeOption = echarts.init(document.getElementById('left1'))
          myChartGaugeOption.setOption(gaugeOption)

           var myChartScatterOption = echarts.init(document.getElementById('left2'))
           myChartScatterOption.setOption(scatterOption)

          var myChartPolarOption = echarts.init(document.getElementById('left3'))
          myChartPolarOption.setOption(polarOption)

          var myChartAnnularOption = echarts.init(document.getElementById('right3'))
          myChartAnnularOption.setOption(annularOption)

          var myChartPlusMinusOption = echarts.init(document.getElementById('right4'))
          myChartPlusMinusOption.setOption(plusMinusOption)

          // var myChartMapOptions = echarts.init(document.getElementById('map'))
          // myChartMapOptions.setOption(mapOptions)

          var myChartLineOption = echarts.init(document.getElementById('line'))
          myChartLineOption.setOption(lineOption)

        },
         getlist(){
          this.$http({
            url: this.$http.adornUrl('/buss/bussfarmlandputinto/list2'),
            method: 'get',
            params: this.$http.adornParams({
              'page': 1,'limit': 10
            })
          }).then(({data}) => {
           
            for (var int = 0; int < data.page.list.length; int++) {
						var s = data.page.list[int]
						this.listp.push(s)
          }
           console.log(this.listp)
          }
          )    	     	       	
      },
      //获取温度
			getwd : function(){
        /*获取最新天气*/
        this.$http({
            url: this.$http.adornUrl('/buss/bussweatherrecord/list'),
            method: 'get',
            params: this.$http.adornParams({
              'page': 1,'limit': 1
            })
          }).then(({data}) => {  
            var r = data;
             var s = [];
				    // s = r.page.list[0].future.split('}');
				     s = JSON.parse(r.page.list[0].future)
				     this.weather =  r.page.list[0].weather;
				     this.area =  r.page.list[0].area;
				     this.createTime =  r.page.list[0].createTime;
				     this.fx =  r.page.list[0].fx;
				     this.windSpeed =  r.page.list[0].windSpeed;
				     this.low =  r.page.list[0].low;
				     this.high =  r.page.list[0].high;
				     
				     //vm.future = s;
				     this.future.push(s[1].type,s[1].ymd,s[1].low.substring(2,s[1].low.length),s[1].high.substring(2,s[1].low.length),
				    		 s[2].type,s[2].ymd,s[2].low.substring(2,s[2].low.length),s[2].high.substring(2,s[2].low.length),
				    		 s[3].type,s[3].ymd,s[3].low.substring(2,s[3].low.length),s[3].high.substring(2,s[3].low.length),
				    		 s[4].type,s[4].ymd,s[4].low.substring(2,s[4].low.length),s[4].high.substring(2,s[4].low.length));
				     //console.log(vm.future);
          }
          )  

	
      },
      //获取通知公告
			gettzgg: function(){
				this.$http({
            url: this.$http.adornUrl('/buss/busspublicnotice/list'),
            method: 'get',
            params: this.$http.adornParams({
              'page': 1,'limit': 10
            })
          }).then(({data}) => {
           
            this.tzgg = data.page.list;
          }
          ) 
			},
       formatTime: function(dateUnix){
                 //var time = new Date(dateUnix).Format("yyyy-MM-dd ");
          let date = new Date(dateUnix);
          let y = date.getFullYear();
          let MM = date.getMonth() + 1;
          MM = MM < 10 ? ('0' + MM) : MM;
          let d = date.getDate();
          d = d < 10 ? ('0' + d) : d;
          let h = date.getHours();
          h = h < 10 ? ('0' + h) : h;
          let m = date.getMinutes();
          m = m < 10 ? ('0' + m) : m;
          let s = date.getSeconds();
          s = s < 10 ? ('0' + s) : s;
          return y + '-' + MM + '-' + d ;

      },
    },
    
  }


</script>



<style lang="scss">
// html,
// body {
//   margin: 0;
//   padding: 0;
// }

#app {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url(~@/assets/img/backgroundxk.png);
  background-size: 100%;
}

.left {
  height: 100%;
}

.content {
  height: 100%;
}

.right {
  height: 100%;
}

.asstes {
  margin: 10px 0;
  border-left: 1px solid #e9f7e5;
  border-right: 1px solid #e9f7e5;
}

.top {
  margin-top: 0px;
}

.bottom {
  margin-bottom: 0px
}

#left1,
#left2,
#left3 {
  height: 33vh;
  width: 30vw;
}

.content-top {
  height: 60vh;
  width: 49.7vw;
}

#right1,
#right2,
#right3,
#right4 {
  height: 25vh;
  width: 20vw;
}

.content-title {
  font-size: 34px;
  color: rgb(49, 179, 82);
  text-align: center;
}

#map {
  height: 60vh;

}

.content-map {
  width: 32vw;
  float: left;
  margin-left: 5px
}

.content-list {
  width: 17.2vw;
  height: 60vh;
  float: left;
  margin-left: 1px;
}

.content-list-title {
  font-size: 24px;
  color: #ffffff;
}

.content-list-title .number {
  color: #0096f3;
  font-size: 20px;
  margin-left: 100px;
}

.content-list-title .about {
  color: #ffffff;
  font-size: 20px;
}

#line {
  height: 20vh;
  width: 100%;
}

.content-list-about {
  display: inline-flex;
  padding-left: 20px;
}

.content-list-about .span1 {
  color: green
}

.content-list-about .span2 {
  color: red
}

.content-list-about .span3 {
  color: #ffffff;
  height: 30px;
  line-height: 30px;
}

.content-list-about-i {
  color: #0096f3;
  font-size: 25px
}

.content-table {
  height: 40vh;
  width: 49.7vw;
  text-align: center;
  overflow-y: scroll;
  margin: 5px;
}

.content-table .table {
  width: 100%;
  height: 100%;
  border: 0;
  border-spacing: 0;
}

.content-table .thead {
  border: 0px solid transparent;
  background-color: #555555;
}

.content-table .thead tr {
  color: #ffffff;
}

.content-table tbody tr td {
  height: 60px;
  line-height: 60px;
  text-align: center;
  border: 0px solid transparent;
}

.content-table .table-class1 {
  background-color: #cdf7c1;
}

.content-table .table-class2 {
  background-color: #42da18;
}

.right-notice {
  color: #ffffff;
  font-size: 24px;
  margin: 5px;
}

.right-notice .diyh {
  font-size: 18px;
  color: red;
}

.right-notice .dieh {
  font-size: 13px;
  color: #fff;
}

.right-notice .dish {
  font-size: 13px;
  color: #fff;
}

.right-notice .tz {
  color: #d0a00e;
}

.right-notice .warning {
  font-size: 18px;
  color: red;
  display: inline-flex;
  height: 20px;
  line-height: 20px;
}
.right-notice .warning2 {
  color: #d0a00e;
  font-size: 4px;
  display: inline-flex;
  height: 20px;
  line-height: 20px;
}
.future_info{
  /* margin-left: 10px; */
  color:#0096f3;
  font-size: 2px;
 }
 .future_infoimg{
 margin-left: 20px;
 }
 .wzcenter{
 text-align: center;
 display:block;
 }
 .fivewether{
  color:#FFF;
  width: 20%;
  float: left;
  margin-left: 10px;
  
 }
 .fivewether1{
 color:#FFF;
  width: 20%;
  float: left;
 
 }
</style>
